<template>
  <div class="product-container">
    <div class="product-container">
      <div style="display: flex;flex-direction: row;margin-bottom: 8px;margin-left: 8px;margin-right: 8px">
        <div style="display: flex;flex-direction: column;flex: 1;text-align: center;text-align: center"
             v-for="(feature,index) in features">
          <img :src='[feature.icon]' style="width: 2rem;height: 2rem;display:block; margin:auto;"/>
          <span
            style="color: #42578E;font-size: 13px;max-width: 70px;display: block;margin: auto;margin-top: 5px">{{feature.feature}}</span>
        </div>
      </div>
      <x-button :gradients="['#F29360', '#F29360']" style="margin:10px 20% 10px 20%;width: 60%;border-radius:99px;">
        了解详情
      </x-button>
    </div>
    <span
      style="justify-content: center;text-align: center;padding: 8px;color:#3399EB;font-size: 14px;margin-left: -15px">查看更多</span>
  </div>
</template>

<script>
  import Icon1Url from '@/assets/image/icon_bank_shell.svg'
  import Icon2Url from '@/assets/image/icon_bank_profit.svg'
  import Icon3Url from '@/assets/image/icon_bank_phone.svg'
  import { XButton } from 'vux'

  export default {
    name: 'HelloWorld',
    components: {
      XButton
    },
    data () {
      return {
        features: [
          {'icon': Icon1Url, 'feature': '利息和金价双重收益'},
          {'icon': Icon2Url, 'feature': '1元或0.1克起购'},
          {'icon': Icon3Url, 'feature': '可提取实物金'}
        ]
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .product-container {
    display: flex;
    flex-direction: column;
    background: white;
    padding: 8px 0px 0px 0px;
  }

  .product-container::after {
    content: "";
    display: inline-block;
    width: 100%;
    height: 1px;
    background: #F8F8F8;
    /*background: red;*/
    position: relative;
  }
</style>
